<template>
  <div>
    <song-cate @changeCate="changeCate"></song-cate>
    <div class="songDetail">
      <div v-for="item in songDetail" :key="item.id" class="songInfo">
        <song-item
          @click="goSongDetail(item.id)"
          :playCount="item.playCount"
          :picUrl="item.coverImgUrl"
          :name="item.name"
          :nickname="item.nickname"
        ></song-item>
      </div>
    </div>
    <music-pagenation pageNum="10" :currentPage="currentPage" @changeCurrentPage="changeCurrentPage"></music-pagenation>
  </div>
</template>

<script setup lang='ts'>
type songDetailT = {
  id: number
  name: string
  description: string
  playCount: number
  coverImgUrl: string
}
import songCate from './songcate.vue'
import songItem from '@/components/songItem.vue'
import MusicPagenation from '@/components/pagenation.vue'
import { onMounted, ref, computed, defineEmits } from 'vue'
import { useRouter } from 'vue-router'
import axios from '@/http.ts'
onMounted(() => {
  getSongAllList()
})
const emit = defineEmits(['changeCate'])
const currentPage = ref<number>(1)
const currentTag = ref<string>('全部')
const songDetail = ref<Array<songDetailT>>([])
let total = 0
const router = useRouter()
const goSongDetail = id => {
  router.push('/home/playList/' + id)
}
const changeCurrentPage = item => {
  currentPage.value = item
  getSongAllList()
}
const changeCate = (tag: string) => {
  currentTag.value = tag
  emit('changeCate', tag)
  getSongAllList()
}
const getSongAllList = () => {
  axios
    .get('/top/playlist', {
      params: {
        limit: 100,
        offset: currentPage.value,
        cat: currentTag.value
      }
    })
    .then(res => {
      res.data.code === 200 &&
        (songDetail.value = res.data.playlists.map(item => {
          return { ...item, nickname: item.creator.nickname }
        }))
      total = res.data.total
      console.log(songDetail.value)
    })
}
</script>

<style lang="less" scoped>
.songDetail {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .songInfo {
    box-sizing: border-box;
    position: relative;
    flex-basis: 157px;
    // text-align: center;
  }
}
</style>